<template>
  <!-- 组件根标签 -->
  <div class="interview" v-if="currQue && currQue.detail">
    <!-- <h5>进入模拟面试页面</h5> -->

    <!-- 1.导航栏 -->
    <van-nav-bar>
      <template #left>
        <i class="iconfont iconbtn_nav_back mycion" @click="back"> </i>
      </template>
      <template #title>
        <span
          >面试题<sup>{{ questionLists.length }}</sup></span
        >
      </template>
      <template #right>
        <span @click="openCard">答题卡</span>
      </template>
    </van-nav-bar>
    <!-- 2.题目部分 -->
    <!-- 单选 -->
    <div class="question" v-if="currQue.detail.type === 1">
      <div class="timu">
        [{{ typeObj[currQue.detail.type] }}]
        {{ currQue.detail.title }}
      </div>
      <div class="tags">
        <div
          class="tag"
          v-for="(item, index) in currQue.detail.tag"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
      <div class="xuan">
        <div
          class="item"
          :class="{
            select: str[index] === singleAnswer,
            correct:
              step >= 2 &&
              currQue.answer &&
              currQue.answer.singleAnswer === str[index],
            cuowu:
              step >= 2 &&
              currQue.answer &&
              singleAnswer !== currQue.answer.singleAnswer &&
              singleAnswer === str[index]
          }"
          @click="changeAnswer(str[index])"
          v-for="(item, index) in currQue.detail.option"
          :key="index"
        >
          <span class="abcd">{{ str[index] }}.</span>
          <span class="neirong">{{ item }}</span>
        </div>
      </div>
    </div>
    <!-- 多选 -->
    <div class="question" v-if="currQue.detail.type === 2">
      <div class="timu">
        [{{ typeObj[currQue.detail.type] }}]
        {{ currQue.detail.title }}
      </div>
      <div class="tags">
        <div
          class="tag"
          v-for="(item, index) in currQue.detail.tag"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
      <div class="xuan">
        <div
          class="item"
          :class="{
            select: multipleAnswer.includes(str[index]),
            correct:
              step >= 2 && currQue.answer.multipleAnswer.includes(str[index]),
            cuowu:
              step >= 2 &&
              !currQue.answer.multipleAnswer.includes(str[index]) &&
              multipleAnswer.includes(str[index])
          }"
          @click="changMutieAnswer(str[index])"
          v-for="(item, index) in currQue.detail.option"
          :key="index"
        >
          <span class="abcd">{{ str[index] }}.</span>
          <span class="neirong">{{ item }}</span>
        </div>
      </div>
    </div>
    <!-- 3.答案解析部分 -->
    <div class="answer" v-if="step >= 2">
      <h3>答案解析</h3>
      <div class="rightanswer">
        正确答案:{{
          currQue.answer.singleAnswer || currQue.answer.multipleAnswer
        }}
      </div>
      <div class="nandu">
        <span>难度:{{ difficultyObj[currQue.answer.difficulty] }}</span>
        <span>提交次数:{{ currQue.answer.submitNum }}</span>
        <span>正确次数:{{ currQue.answer.correctNum }}</span>
      </div>
      <div class="jiexi">
        {{ currQue.answer.answerAnalysis }}
      </div>
    </div>
    <!-- 4.最底部 -->
    <div class="foot">
      <div class="one">
        <div class="icon">
          <i class="iconfont iconbtn_shoucang_nor"></i>
          <span>收藏</span>
        </div>
        <div class="icon">
          <i class="iconfont iconbtn_shuati_fankui"></i>
          <span>反馈</span>
        </div>
      </div>
      <div class="two">
        <span class="current">{{ currIndex + 1 }}</span
        >/{{ questionLists.length }}题
      </div>
      <div class="three">
        <van-button type="info" v-if="step >= 2 && !isFinished" @click="nextone"
          >下一题</van-button
        >
        <van-button
          type="danger"
          v-if="step < 2 && !isFinished"
          :disabled="step !== 1"
          @click="submit"
          >提交</van-button
        >
        <van-button @click="jiaojuan" type="danger" v-if="isFinished"
          >提交试卷</van-button
        >
      </div>
    </div>

    <!-- 答题卡界面 -->
    <van-popup
      class="answercard"
      v-model="cardShow"
      position="bottom"
      :style="{ height: '90%' }"
    >
      <van-nav-bar title="答题卡">
        <template #right>
          <span>{{ currIndex + 1 }}</span
          >/{{ questionLists.length }}题
        </template>
      </van-nav-bar>
      <div class="total">共74题</div>
      <ul class="items">
        <li
          @click="toQestion(index)"
          class="item"
          :class="{
            current: currIndex === index,
            success:
              questionLists[index].answer &&
              questionLists[index].answer.isRight,
            error:
              questionLists[index].answer &&
              !questionLists[index].answer.isRight
          }"
          v-for="(item, index) in questionLists.length"
          :key="index"
        >
          {{ item }}
        </li>
      </ul>
    </van-popup>
  </div>
</template>
<script>
import {
  getQuestionApibyCityType,
  submitQuestionApi,
  getNextoneApi
} from './../../../api/interview'
export default {
  name: '',
  data () {
    return {
      // 答题状态
      // 0获取题目  但没有答题  1:表示 已答题,但还没有点击提交   2:已提交.但不是最后一题   3:已提交且是最后一题
      step: 0,

      // 岗位id
      type: '',
      // 城市名字
      city: '',
      // 返回的模拟面试题数据
      questionLists: [],
      // 题型
      typeObj: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      // 题目选项前字母
      str: 'ABCDEFGHI',
      // 当前是第几题
      currIndex: 0,

      // 单选题选中的答案
      singleAnswer: '',
      // 多选题选中的答案
      multipleAnswer: [],
      // 题目困难程度
      difficultyObj: {
        1: '简单',
        2: '一般',
        3: '困难'
      },

      // 答题卡显示
      cardShow: false
    }
  },

  async created () {
    // 获取到上个页面传过来的参数
    this.city = this.$route.params.city
    this.type = this.$route.params.type
    console.log(this.city, this.type)

    const res = await getQuestionApibyCityType({
      type: this.type,
      city: this.city
    })

    console.log(res)
    this.questionLists = res.data.data
  },

  methods: {
    jiaojuan () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否提交试卷'
        })
        .then(() => {
          this.$toast.success('提交试卷完成')
          this.$router.push('/question')
        })
        .catch()
    },

    async toQestion (index) {
      this.currIndex = index
      if (this.currQue.answer) {
        this.step = 2
        this.cardShow = false
      } else if (this.currQue.detail) {
        this.step = 0
        this.cardShow = false
      } else {
        const res = await getNextoneApi(this.currQue.id)
        this.$set(this.currQue, 'detail', res.data.data)
        this.cardShow = false
      }
    },

    openCard () {
      this.cardShow = true
    },

    async nextone () {
      this.currIndex += 1
      if (this.currQue.answer) {
        this.step = 2
      } else if (this.currQue.detail) {
        this.step = 0
      } else {
        this.step = 0
        this.singleAnswer = ''
        this.multipleAnswer = []
        const res = await getNextoneApi(this.currQue.id)
        // console.log(res)

        // $set用于处理动态添加属性的响应式问题
        this.$set(this.currQue, 'detail', res.data.data)
      }
    },
    // 单选
    changeAnswer (ans) {
      console.log(ans)
      this.singleAnswer = ans
      this.step = 1
    },
    // 多选
    changMutieAnswer (ans) {
      const index = this.multipleAnswer.indexOf(ans)
      if (this.step < 2) {
        if (index === -1) {
          this.multipleAnswer.push(ans)
        } else {
          // 否则就删除掉
          this.multipleAnswer.splice(index, 1)
        }
      }
      this.step = 1
    },
    back () {
      this.$router.back()
    },
    async submit () {
      const res = await submitQuestionApi({
        id: this.currQue.id,
        singleAnswer: this.singleAnswer,
        multipleAnswer: this.multipleAnswer
      })
      console.log(res)
      // 将提交的答案,储存到这道题的数据中,给这道题多添加一个属性存储这个答案
      // this.currQue.answer = res.data.data
      // 动态数据响应式的储存,因为 answer 并不是一开始就存在与data中的数据,所以一定要用$set的方式进行存储才可以响应式的渲染到页面
      this.$set(this.currQue, 'answer', res.data.data)
      // 状态去到2
      this.step = 2
    }
  },
  components: {},
  computed: {
    // 计算属性储存 的是本题的数据
    currQue () {
      return this.questionLists[this.currIndex] || {} //  ||后面的{}是为了防止 报错   detail of underfind
    },
    // 判断每个题目中是否都含有answer元素
    isFinished () {
      // 数组的every方法 只有数组中的所有元素都满足条件时,才会返回true
      return this.questionLists.every((item, index) => {
        return !!item.answer
      })
    }
  }
}
</script>
<style lang="less" scoped>
.interview {
  height: 100vh;
  background-color: #ffffff;
  /deep/.van-nav-bar__left {
    padding-left: 0;
  }
  .mycion {
    font-size: 40px;
  }

  .question {
    padding: 15px;
    .timu {
      font-size: 17px;
      line-height: 25px;
    }
    .tags {
      display: flex;
      font-size: 12px;
      margin: 10px 0;
      .tag {
        padding: 5px 10px;
        margin: 0 10px 0 0;
        background-color: #f5f5f5;
      }
    }
    .xuan {
      .item {
        border: 1px solid #f5f5f5;
        border-radius: 4px;
        font-size: 18px;
        padding: 10px 15px;
        margin: 10px 0;
        .neirong {
          font-size: 14px;
        }
      }
      .select {
        border: 1px solid #ccc;
      }
      .correct {
        background-color: #ddfad9;
        color: #42c779;
        position: relative;
        &::after {
          position: absolute;
          top: 50%;
          right: 10px;
          transform: translateY(-50%);
          font-family: 'iconfont' !important;
          font-size: 16px;
          font-style: normal;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          content: '\e604';
        }
      }
      .cuowu {
        background-color: #ffefea;
        color: #ec5851;
        position: relative;
        &::after {
          position: absolute;
          top: 50%;
          right: 10px;
          transform: translateY(-50%);
          font-family: 'iconfont' !important;
          font-size: 16px;
          font-style: normal;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          content: '\e605';
        }
      }
    }
  }

  .answer {
    padding: 15px;
    h3 {
      font-size: 20px;
    }
    .rightanswer {
      font-size: 16px;
      color: #56c999;
      line-height: 40px;
    }
    .nandu {
      font-size: 12px;
      background-color: #f6f4f5;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .jiexi {
      font-size: 15px;
      line-height: 25px;
      margin-bottom: 80px;
    }
  }

  .foot {
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    padding: 15px;
    align-items: center;
    background-color: #ffffff;
    .one {
      flex: 1;
      display: flex;
      font-size: 14px;
      .icon {
        margin: 0 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        i {
          font-size: 25px;
        }
      }
    }
    .two {
      font-size: 12px;
      flex: 1;
      .current {
        font-size: 20px;
        color: red;
      }
    }
    .three {
    }
  }

  .answercard {
    .total {
      background-color: orangered;
      font-size: 16px;
      padding: 10px;
    }
    .items {
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 33px;
        height: 33px;
        border: 1px solid #ccc;
        border-radius: 50%;
        text-align: center;
        line-height: 33px;
        margin: 10px;
        font-size: 14px;
        color: #ccc;
      }
      .current {
        border: 1px solid #000;
        color: #000;
      }
      .success {
        border: transparent;
        color: #1dc779;
        background-color: #ddfad9;
      }
      .error {
        border: transparent;
        color: tomato;
        background-color: #ffefea;
      }
    }
  }
}
</style>
